<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<style type="text/css">
			table{
				width: 250px;
				height: 200px;
				border-collapse: collapse;
			}
			table th{
				border: 2px solid #069;
			}
			body{
				text-align: center;
			}
			th{
				font-family: "微软雅黑", verdana, sans-serif, "宋体";
				color: #666;
				font-weight: bold;
				margin-bottom: 30px;
			}
		</style>
	</head>
	<body>
		<!--AJAX 将按照以下格式插入DOM-->
		<!--<table>
			<tr>
				<th>一行一列</th>
				<th>一行二列</th>
			</tr>
			<tr>
				<th>二行一列</th>
				<th>二行二列</th>
			</tr>
			<tr>
				<th>三行一列</th>
				<th>三行二列</th>
			</tr>
			<tr>
				<th>四行一列</th>
				<th>四行二列</th>
			</tr>-->
		<!--</table>-->
		<button id="btn">Get JSON</button>
		<div id="theD"></div>
		<script type="text/javascript">
			$(function(){
				$('#btn').click(function(){
					// 1. $.ajax GET JSON
					//        必须指定的url,type,success
					//        success调用时所给的参数data，其类型是根据服务器返回的Content-Type类型自动进行转换
					//            如果没有设定或者设定为text，那么data是string类型
					//            如果设定为application/json，那么data是json object
					$.ajax({
						url: './data.json',
//						type: 'get',
					// 3. $.ajax POST JSON
						type: 'post',
						dataType: 'json', // 如果Content-Type没有设定，我们也可以通过设定 dataType来实现。
						success: function(data){
							$('#theD').append(jsonToHTML(data));
							
						}
					});
					
					// 2. $.ajax GET XML
					//        必须指定的url,type,success
//					$.ajax({
//						url: './data.xml',
//						type: 'get',
//						dataType: 'xml', // 如果Content-Type没有设定，我们也可以通过设定 dataType来实现。
//						success: function(data){
//							$('#theD').append(xmlToHTML(data));
//						}
//					});
				});
			});
			
			// parse JSON
			function jsonToHTML(json){
				console.log(typeof json);
				var $table = $('<table></table>');
				
				$(json['LINE']).each(function(){
					var $tr = $('<tr></tr>').appendTo($table);
					$(this['COLUMN']).each(function(){
						var $th = $('<th></th>').html(this['text']).appendTo($tr);
					});
				});
				
				return $table;
			}
			
			// parse XML
//			function xmlToHTML(xml){
//				var $table = $('<table></table>');
//				
//				$(xml).find('LINE').each(function(){
//					var $tr = $('<tr></tr>').appendTo($table);
//					$(this).find('COLUMN').each(function(){
//						var $th = $('<th></th>').html($(this).html()).appendTo($tr);
//					});
//				});
//				
//				return $table;
//			}
		</script>
	</body>
</html>